<template>
  <div class="achievement" v-cloak>
    <div class="bg_color"></div>
    <div>
      <div class="persona_img">
        <img src="../assets/image/a_06.png" alt="">
        <div>
          <img src="../assets/image/a_07.png" alt="" @click="search">
          <input type="text" placeholder="请输入产品编号" v-model="batch_number" v-on:input="searchinput"/>
        </div>
      </div>
      <div v-show="searchsta">
        <mt-loadmore :distanceIndex="4" @top-status-change="handleTopChange" :topDistance="30" :bottomDistance='30' :maxDistance="40" :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="bottomAllLoaded" ref="loadmore" :autoFill="false" :bottomAllLoaded = bottomsta>
          <div slot="top" class="mint-loadmore-top">
            <span v-show="topStatus === 'loading'" class="color_top">Loading...</span>
          </div>
          <p class="all">查询结果：</p>
          <div class="nosta" v-if="nosta">
            <img src="../assets/image/a_08.png" alt="">
            <p>未查询到您查找的商品！</p>
          </div>
          <div v-else>
            <div class="near_by" v-for="(item,index) in list" :class="{'nearbac' : batchnumber == item.bn_batch_number}" @click="batchnumberclick(item.bn_batch_number)">
              <img :src="item.pr_image" alt="">
              <div class="near_b1">
                <h3>{{item.pr_name}}</h3>
                <p>商品编号:{{item.bn_batch_number}}</p>
              </div>
            </div>
            <div class="bindbtn" @click="submit" :class="{'bg_c' : batchnumber != ''}">去激活</div>
          </div>
          <div slot="bottom" class="mint-loadmore-bottom">
            <load-more tip="正在加载" v-show="loadingBottomShow"></load-more>
          </div>
        </mt-loadmore>
        </div>

    </div>
  </div>
</template>
<script>
  import { LoadMore } from 'vux'
  import { Loadmore } from 'mint-ui'
  import Vue from 'vue'
  Vue.component(Loadmore.name, Loadmore)
  export default {
    components: {
      LoadMore
    },
    name: 'index',
    data () {
      return {
        searchsta: false,
        show: false,
        batch_number: '',
        last_id: '',
        list: [],
        nosta: false,
        batchnumber: '',
        isshow: true,
        loadingBottomShow: false,
        topStatus: 'loading',
        bottomsta: false,
        bottomAllLoaded: false,
        research: true
      }
    },
    methods: {
      handleTopChange (status) {
        this.topStatus = status
      },
      loadBottom () {
        this.loadingBottomShow = true
        if (this.research === true) {
          this.getProductList('')
        } else {
          this.loadingBottomShow = false
          this.$refs.loadmore.onBottomLoaded()
        }
      },
      loadTop () {
        this.nosta = false
        this.research = true
        this.last_id = 0
        this.bottomsta = false
        this.getProductList('reflsh')
      },
      submit: function () {
        var thisObj = this
        if (thisObj.batch_number === '') {
          thisObj.$vux.toast.show({
            text: '请选择要激活的产品',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        thisObj.$chaos.ajax({
          data: {
            batch_number: thisObj.batch_number
          },
          slient: true,
          userinfo: true,
          url: 'User/activate',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              setTimeout(function () {
                window.location.href = '#/Activation'
              }, 1000)
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      batchnumberclick: function (number) {
        this.batchnumber = number
      },
      searchinput: function () {
        if (this.batch_number === '') {
          this.nosta = false
          this.searchsta = false
          this.list = []
        }
      },
      search: function () {
        var thisObj = this
        if (thisObj.batch_number === '') {
          thisObj.$vux.toast.show({
            text: '请输入产品编号',
            type: 'text',
            width: '180px',
            position: 'bottom'
          })
          return false
        }
        this.nosta = false
        this.research = true
        this.last_id = 0
        this.bottomsta = false
        this.getProductList('reflsh')
      },
      getProductList: function (title) {
        var thisObj = this
        thisObj.$chaos.ajax({
          data: {
            last_id: thisObj.last_id,
            batch_number: thisObj.batch_number
          },
          slient: true,
          userinfo: true,
          url: 'User/getProductListByBatchNumber',
          callback: function (type, res) {
            if (res.status === 'SUCCESS') {
              if (title === 'reflsh') {
                thisObj.list = []
                thisObj.$refs.loadmore.onTopLoaded()
              }
              thisObj.loadingBottomShow = false
              thisObj.$refs.loadmore.onBottomLoaded()
              thisObj.searchsta = true
              if (res.result.list.length === 0) {
                thisObj.research = false
                if (thisObj.last_id === 0) {
                  thisObj.nosta = true
                }
                return false
              }
              if (res.result.list.length < 5) {
                thisObj.bottomsta = true
                thisObj.research = false
              } else {
                thisObj.last_id = res.result.list[res.result.list.length - 1].bn_id
              }
              thisObj.list = thisObj.list.concat(res.result.list)
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      verify: function () {
        this.$chaos.setTitle('防伪查询')
        this.$store.commit('headerShow', true)
        this.$store.commit('title', '防伪查询信息')
        this.$store.commit('footerShow', false)
        this.$chaos.verify(function () {
        })
      }
    },
    created: function () {
      this.verify()
    },
    mounted: function () {
      window.scrollTo(0, 2000)
    },
    watch: {
      '$route': 'verify'
    }
  }
</script>
<style scoped>
  .persona_img{
    margin-top:45px;
    overflow: hidden;
    width:calc(100% - 30px);
    padding: 15px 15px;
  }
  .mint-loadmore-top{
    text-align: center;
    line-height: 33px;
  }
  .bg_c{
    background: rgb(29, 157, 255)!important;
  }
  .nearbac{
    background:#f1f1f1 ;
  }
  .achievement{
    width:100%;
    overflow: hidden;
  }
  .nosta{
    width:100%;
    overflow: hidden;
    margin: 30px auto;
    text-align: center;
  }
  .nosta img{
    width:90px;
    margin-bottom: 10px;
  }
  .bindbtn{
    width:70%;
    margin:40px auto;
    background: #d2d2d2;
    color: #fff;
    text-align: center;
    line-height: 40px;
    border-radius: 5px 5px;
  }
  .persona_img div{
    margin-right:40px;
    color: #000;
    margin-top:4px;
    border:1px solid #cacaca;
    border-radius: 20px;
    overflow: hidden;
  }
  .persona_img div input{
    border:0px;
    width:calc(100% - 60px);
    line-height: 33px;
    padding-left:10px;
  }
  .persona_img div img{
    float: right;
    width:16px;
    padding: 7px 15px;
  }
  .persona_img>img{
    width:25px;
    height:25px;
    float: right;
    margin-top:9px;
  }
  .bg_color{
    background: url("../assets/image/a_10.png");
    background-size: cover;
  }
  .near_by{
    width:calc(100% - 30px);
    padding: 15px 15px;
    overflow: hidden;
  }
  .near_by img{
    width:120px;
    height:120px;
    border-radius: 5px;
    float: left;
  }
  .near_b1 p{
    color: #676767;
    margin: 8px 0px;
  }
  .near_p{
    height:44px;
    line-height:22px;
    margin:11px 0px;

  }
  .near_b1 h3{
    font-size: 16px;
    line-height: 28px;
  }
  .near_b1{
    margin-left:130px;
  }
  .loca{
    width:calc(100% - 30px);
    background: #fff;
    padding: 10px 15px;
    margin-top:45px;
    overflow: hidden;
  }
  .all{
    background: #fff;
    line-height: 40px;
    padding: 0px 15px;
    width:calc(100% - 15px);
    color: #000;
  }
  .loca_li1{
    width:22%;
  }
  .loca li{
    float: left;
  }
  .loca_li2{
    width:25%;
    border-right:1px solid #cacaca;
    text-align: center;
  }
  .loca_li2 img{
    width: 12px;
    vertical-align: 2px;
  }
  .loca .loca_li2:last-child{
    border-right: 0px;
  }
</style>
